<template>
 <div class="box">
   <div class="body">
   <el-form ref="form" :model="form">
  <el-row>
  <el-col :span="6"><el-form-item label="标签名称" prop="tags" ><el-input  placeholder="请输入" size="medium" v-model="form.tags" ></el-input></el-form-item></el-col>
  <el-col :span="6"><el-form-item label="城市" prop="province" ><el-select  placeholder="请选择" v-model="form.province" @visible-change="getProvince" @change="getCity" >
     <el-option
      v-for="(item,index) in provincesOptions"
      :key="index"
      :label="item"
      :value="item">
    </el-option>
    </el-select></el-form-item></el-col>
  <el-col :span="6"><el-form-item label="地区" prop="city"><el-select  placeholder="请选择" v-model="form.city"  >
         <el-option
      v-for="(item,index) in cityOptions"
      :key="index"
      :label="item"
      :value="item">
    </el-option>
    </el-select></el-form-item></el-col>
  <el-col :span="6"><el-form-item label="企业简称" prop="shortName"><el-input  placeholder="请输入" v-model="form.shortName" ></el-input></el-form-item></el-col>
</el-row>
  <el-row>
  <el-col :span="6"><el-form-item label="状态" prop="state" ><el-select  placeholder="请选择" v-model="form.state">
       <el-option
      v-for="(item,index) in stateOptions"
      :key="index"
      :label="item"
      :value="item">
    </el-option>
    </el-select></el-form-item></el-col>
  <el-col :span="6" class="span_6"><searchbtnVue @searchForm="searchForm" @removeForm="removeForm" /></el-col>
  <el-col :span="12"><addbuttonVue @click.native="addCompany" /></el-col>
</el-row>
</el-form>
    <headerVue :title="title" />

     <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="序号"
        >
      </el-table-column>
      <el-table-column
        prop="number"
        label="企业编号"
        >
      </el-table-column>
      <el-table-column
        prop="shortName"
        label="企业简称">
      </el-table-column>
           <el-table-column
        prop="tags"
        label="标签">
      </el-table-column>
           <el-table-column
        prop="creatorID"
        label="创建者">
      </el-table-column>
                <el-table-column
        prop="addDate"
        label="创建日期">
      </el-table-column>
                <el-table-column
        prop="remarks"
        label="备注">
      </el-table-column>
        <el-table-column
        prop="state"
        label="状态">
      </el-table-column>
            <el-table-column label="操作"  width="140" class="el_table">
            <template #default="{ row }">
              <operateVue :row="row" @editNews="editCompany" @changeState="changeState" @deleteNews="deleteNews" :isshow="true" />
            </template>
          </el-table-column>

    </el-table>
     <pageToolVue :total="title" :paginationPage="sizeObj.page" :paginationPagesize="sizeObj.pagesize" @pageChange="pageChange" @pageSizeChange="pageSizeChange" />

     <companysAddVue ref="companysAdd" :formBase="formBase" :titleInfo="titleInfo" @newDataes="newDataes" />
   </div>

 </div>
</template>

<script>
import headerVue from '@/module-manage/components/header'
import searchbtnVue from '../components/searchbtn.vue'
import addbuttonVue from '../components/addbutton.vue'
import operateVue from '../components/operate.vue'
import pageToolVue from '../../module-dashboard/components/pageTool.vue'
import { list, detail, disabled, remove } from '@/api/hmmm/companys.js'
import companysAddVue from '../components/companys-add.vue'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { parseTime } from '@/utils/index.js'
export default {
  components: {
    headerVue, searchbtnVue, addbuttonVue, operateVue, pageToolVue, companysAddVue
  },
  data () {
    return {
      formBase: {
        shortName: '',
        isFamous: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''

      },
      tableData: [],
      sizeObj: {
        page: 1,
        pagesize: 10
      },
      title: null,
      titleInfo: {
        text: '',
        pageTitle: ''
      },
      form: {
        tags: '',
        province: '',
        city: '',
        shortName: '',
        state: null
      },
      provincesOptions: [],
      cityOptions: [],
      stateOptions: ['已禁用', '已启用']
    }
  },

  created () {
    this.getrenderList(this.sizeObj)
  },

  methods: {
    async getrenderList (obj) {
      const { data } = await list(obj)
      this.title = data.counts
      this.tableData = data.items
      this.tableData.forEach(item => {
        item.state = item.state === 1 ? '启用' : '禁止'
        item.addDate = parseTime(item.addDate)
      })
    },
    pageChange (pageNum) {
      this.sizeObj.page = pageNum
      this.getrenderList(this.sizeObj)
    },
    pageSizeChange (pageSize) {
      this.sizeObj.pagesize = pageSize
      this.getrenderList(this.sizeObj)
    },
    addCompany () {
      this.titleInfo.text = '新增'
      this.titleInfo.pageTitle = '用户'
      this.$refs.companysAdd.dialogFormV()
    },
    newDataes () {
      this.formBase.shortName = ''
      this.formBase.isFamous = ''
      this.formBase.company = ''
      this.formBase.province = ''
      this.formBase.city = ''
      this.formBase.tags = ''
      this.formBase.remarks = ''
      this.$refs.companysAdd.dialogFormH()
      this.getrenderList(this.sizeObj)
    },
    async editCompany (id) {
      const { data } = await detail({ id })
      this.formBase = data
      this.formBase.isFamous = this.formBase.isFamous === 1
      this.titleInfo.text = '编辑'
      this.titleInfo.pageTitle = '用户'
      this.$refs.companysAdd.dialogFormV()
    },
    async changeState (obj) {
      await disabled(obj)
      this.getrenderList(this.sizeObj)
    },
    async deleteNews (id) {
      await remove({ id })
      this.getrenderList(this.sizeObj)
    },
    getProvince (value) {
      if (value) {
        this.provincesOptions = provinces()
      }
    },
    getCity (e) {
      if (e) {
        this.cityOptions = citys(e)
      }
    },
    removeForm () {
      this.$refs.form.resetFields()
      this.getrenderList(this.sizeObj)
    },
    async searchForm () {
      if (this.form.tags || this.form.province || this.form.city || this.form.shortName || this.form.state) {
        this.form.state = this.form.state === '已禁用' ? 0 : this.form.state === '已启用' ? 1 : null
        this.getrenderList({ ...this.sizeObj, ...this.form })
      }
    }
  }
}
</script>

<style scoped lang='less'>
.box {
  padding: 20px;
}
.body {
  padding: 20px;
  background-color: #fff;
}
  .el-row {
    margin-bottom: 20px;
  /deep/ .el-form-item{
    width: 400px;
    display: flex;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
  }
      /deep/.el-input__inner{
      height: 32px;
      width: 298px;
    }
    .el-col-6{
      display: flex;
      height: 32px;
      /deep/.el-input__suffix{
        width: 25px;
      }
/deep/.el-form-item__label{
  width: 68px;
  height: 32px;
}
/deep/.minbox{
  padding-left: 14px;
}
    }
   /deep/ .el-select{
      margin-right: 15px;
      padding: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
  /deep/.el-form{
    margin-bottom: 15px;
  }
.el_table{
/deep/.cell{
  text-align: center;
}
}
</style>
